
<script type="text/html" template>
  <link rel="stylesheet" href="{{ layui.setter.base }}style/login.css?v={{ layui.admin.v }}-1" media="all">
</script>

<div class="login-container">
  <div class="left-container" id="leftContainer">
    <img src="/images/login/login-mgr-img.svg" alt="" />
  </div>
  <div class="logo-pallet">
    <div class="logo-img-box" id="siteLogo"></div>
  </div>
  <div class="right-container">
    <div class="top-nav">
      <a class="top-nav-link" href="" id="mchSiteUrl">
        <div class="web-link" data-i18n="login.home">官网首页</div>
        <img src="/images/login/arrow1CB7A2.svg" alt="" class="link-arrow" />
      </a>
      <!-- 语言切换按钮 -->
      <div class="language-switcher">
        <div class="lang-dropdown">
          <button class="lang-btn" id="currentLang">
            <span class="lang-text">中文</span>
            <svg class="lang-arrow" width="12" height="8" viewBox="0 0 12 8" fill="none">
              <path d="M1 1.5L6 6.5L11 1.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </button>
          <div class="lang-menu" id="langMenu">
            <div class="lang-option" data-lang="zh_CN">
              <span class="lang-flag">🇨🇳</span>
              <span class="lang-name">中文</span>
            </div>
            <div class="lang-option" data-lang="en_US">
              <span class="lang-flag">🇺🇸</span>
              <span class="lang-name">English</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="input-pallet-box">
      <div class="input-title-box">
        <div class="title-icon-box">
          <img src="/images/login/login-mgr-icon.svg" alt="" />
        </div>
        <div class="title-text-box">
          <div class="title-text-cn" data-i18n="login.title.manage">运营平台登录</div>
          <div class="title-text-en" data-i18n="login.subtitle.manage">
            Login to the operation platform system
          </div>
        </div>
      </div>

      <form class="layui-form" style="max-width: 100%;">
        <input name="vercodeRandomStr" id="vercodeRandomStr" type='hidden'>
        <div class="input-box">
          <div class="input-tips" data-i18n="login.username">用户名</div>
          <div class="input-con-box">
            <img src="/images/login/user-icon.svg" alt="" class="input-icon" />
            <input type="text" name="username" lay-verify="required" class="input-pallet" data-i18n-placeholder="login.username.placeholder" placeholder="请输入用户名" />
          </div>
        </div>

        <div class="input-box">
          <div class="input-tips" data-i18n="login.password">密码</div>
          <div class="input-con-box">
            <img
                    src="/images/login/password-icon.svg"
                    alt=""
                    class="input-icon"
            />
            <input type="password" name="password" lay-verify="required" class="input-pallet" data-i18n-placeholder="login.password.placeholder" placeholder="请输入密码" />
          </div>
        </div>

        <div class="input-box">
          <div class="input-tips" data-i18n="login.captcha">图形验证码</div>
          <div class="input-con-box captcha-box">
            <img
                    src="/images/login/captcha-icon.svg"
                    alt=""
                    class="input-icon"
            />
            <input type="text" name="vercode" lay-verify="required" class="input-pallet captcha-input" data-i18n-placeholder="login.captcha.placeholder" placeholder="请输入验证码" />
            <div class="captcha-img">
              <img src="" id="LAY-user-get-vercode" alt="" />
            </div>
          </div>
        </div>

        <div class="input-box">
          <div class="input-tips" data-i18n="login.google.code">谷歌验证码（若没有可以不填）</div>
          <div class="input-con-box">
            <img src="/images/login/google-icon.svg" alt="" class="input-icon" />
            <input type="text" name="googleCode" class="input-pallet" data-i18n-placeholder="login.google.code.placeholder" placeholder="请输入谷歌验证码" />
          </div>
        </div>

        <div class="input-box button-box">
          <div class="login-button" id="loginBtn" lay-submit lay-filter="LAY-user-login-submit" onclick="return false;">
            <div class="login-but-text" data-i18n="login.submit">登录</div>
            <div class="login-but-img">
              <img src="/images/login/arrowFFF.svg" alt="">
            </div>
          </div>
        </div>

      </form>
    </div>
  </div>
</div>

<!-- 语言切换样式 -->
<style>
.language-switcher {
  position: relative;
  margin-left: 20px;
}

.lang-dropdown {
  position: relative;
}

.lang-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: white;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
}

.lang-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
}

.lang-arrow {
  transition: transform 0.3s ease;
}

.lang-dropdown.active .lang-arrow {
  transform: rotate(180deg);
}

.lang-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  background: white;
  border: 1px solid #e1e5e9;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  min-width: 140px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  z-index: 1000;
}

.lang-dropdown.active .lang-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  color: #333;
  font-size: 14px;
}

.lang-option:hover {
  background-color: #f5f7fa;
}

.lang-option:first-child {
  border-radius: 8px 8px 0 0;
}

.lang-option:last-child {
  border-radius: 0 0 8px 8px;
}

.lang-flag {
  font-size: 16px;
}

.lang-name {
  font-weight: 500;
}

.top-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>

<!-- 语言切换样式 -->
<style>
.language-switcher {
  position: relative;
  margin-left: 20px;
}

.lang-dropdown {
  position: relative;
}

.lang-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: white;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
}

.lang-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
}

.lang-arrow {
  transition: transform 0.3s ease;
}

.lang-dropdown.active .lang-arrow {
  transform: rotate(180deg);
}

.lang-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  background: white;
  border: 1px solid #e1e5e9;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  min-width: 140px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  z-index: 1000;
}

.lang-dropdown.active .lang-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  color: #333;
  font-size: 14px;
}

.lang-option:hover {
  background-color: #f5f7fa;
}

.lang-flag {
  font-size: 16px;
}

.top-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>

<script src='/src/lib/core.js'></script>
<script src='/src/lib/Crypto-js.js'></script>
<script src='/static/i18n/i18n.js'></script>
<script src='/static/i18n/zh_CN.js'></script>
<script src='/static/i18n/en_US.js'></script>
<script src='/static/i18n/i18n.js'></script>
<script src='/static/i18n/zh_CN.js'></script>
<script src='/static/i18n/en_US.js'></script>
<script>
layui.use(['admin', 'form', 'user'], function(){
  var $ = layui.$
  ,setter = layui.setter
  ,admin = layui.admin
  ,form = layui.form
  ,router = layui.router()
  ,search = router.search
  ,layer = layui.layer;

  var loadIndex = layer.load(1);

  //变更网站标题
  $.ajax({
    async: false, type: 'get',
    url: layui.setter.baseUrl + '/auth/siteTitle',
    success: function(res){
      $("#mchSiteUrl").attr("href", res.data.mchSiteUrl);
      $("#siteLogo").append('<img src="'+res.data.siteLogo+'" style="height: 30px;" alt="'+res.data.siteTitle+'">');
    }
  });

  $('.input-pallet').bind('keyup', function(event) {
    if (event.keyCode == "13") { //keyCode=13是回车键
      $("#loginBtn").trigger("click");
    }
  });

  form.render();

  //提交
  form.on('submit(LAY-user-login-submit)', function(obj){

    //请求登入接口
    admin.encryptReq({
      type: 'get'
      ,url: layui.setter.baseUrl + '/auth' //实际使用请改成服务端真实接口
      ,method:'post'
      ,data: obj.field
      ,error: function(err){ layer.alert(JSON.stringify(err.field), { title: '错误提示' }) }
      ,success: function (res) {
        //请求成功后，写入 access_token
        layui.data(setter.tableName, {
          key: setter.request.tokenName
          ,value: res.data.access_token
        });
        //登入成功的提示与跳转
        layer.msg('登入成功', {
          offset: '15px'
          ,icon: 1
          ,time: 1000
        }, function(){
          location.hash = search.redirect ? decodeURIComponent(search.redirect) : '/';
        });
      }
    });

  });

  $.randomString = function (len) {
      len = len || 32;
      var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';    /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
      var maxPos = $chars.length;
      var pwd = '';
      for (i = 0; i < len; i++) {
          pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
      }
      return pwd;
  };

  $('body').off('click', "#LAY-user-get-vercode").on('click', "#LAY-user-get-vercode", function(){
      var vercodeRandomStr = $.randomString(6) + new Date().getTime();
      $("#vercodeRandomStr").val(vercodeRandomStr);
      $("#LAY-user-get-vercode").attr('src', layui.setter.baseUrl + '/auth/vercode?vercodeRandomStr=' + vercodeRandomStr);
  });

  $("#LAY-user-get-vercode").click();

  //监听加载状态改变
  $(document).ready(function(){
    layer.close(loadIndex);
    $(".login-container").removeClass("layui-hide");

    // 初始化语言切换功能
    initLanguageSwitcher();
  });

});

// 语言切换功能
function initLanguageSwitcher() {
  var currentLang = localStorage.getItem('xxpay_locale') || 'zh_CN';
  var langBtn = document.getElementById('currentLang');
  var langMenu = document.getElementById('langMenu');
  var langDropdown = langBtn.parentElement;

  // 语言映射
  var langMap = {
    'zh_CN': { name: '中文', flag: '🇨🇳' },
    'en_US': { name: 'English', flag: '🇺🇸' }
  };

  // 更新当前语言显示
  function updateCurrentLang(lang) {
    var langInfo = langMap[lang];
    langBtn.querySelector('.lang-text').textContent = langInfo.name;
    currentLang = lang;
  }

  // 初始化当前语言
  updateCurrentLang(currentLang);
  updatePageTexts(currentLang);

  // 点击语言按钮
  langBtn.addEventListener('click', function(e) {
    e.stopPropagation();
    langDropdown.classList.toggle('active');
  });

  // 点击语言选项
  var langOptions = document.querySelectorAll('.lang-option');
  langOptions.forEach(function(option) {
    option.addEventListener('click', function() {
      var selectedLang = this.getAttribute('data-lang');
      if (selectedLang !== currentLang) {
        switchLanguage(selectedLang);
        updateCurrentLang(selectedLang);
      }
      langDropdown.classList.remove('active');
    });
  });

  // 点击其他地方关闭菜单
  document.addEventListener('click', function() {
    langDropdown.classList.remove('active');
  });
}

// 切换语言
function switchLanguage(lang) {
  // 保存语言偏好
  localStorage.setItem('xxpay_locale', lang);

  // 调用后端API
  fetch('/api/i18n/switch', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: 'lang=' + encodeURIComponent(lang)
  }).then(function(response) {
    return response.json();
  }).then(function(data) {
    if (data.code === 0) {
      // 更新页面文本
      updatePageTexts(lang);
    }
  }).catch(function(error) {
    console.error('Language switch failed:', error);
    // 即使API失败也更新页面文本
    updatePageTexts(lang);
  });
}

// 更新页面文本
function updatePageTexts(lang) {
  var messages = getMessages(lang);

  // 更新所有带有data-i18n属性的元素
  var elements = document.querySelectorAll('[data-i18n]');
  elements.forEach(function(element) {
    var key = element.getAttribute('data-i18n');
    var text = messages[key] || key;
    element.textContent = text;
  });

  // 更新placeholder
  var placeholderElements = document.querySelectorAll('[data-i18n-placeholder]');
  placeholderElements.forEach(function(element) {
    var key = element.getAttribute('data-i18n-placeholder');
    var text = messages[key] || key;
    element.placeholder = text;
  });
}

// 获取语言包
function getMessages(lang) {
  var messages = {
    'zh_CN': {
      'login.home': '官网首页',
      'login.title.manage': '运营平台登录',
      'login.subtitle.manage': 'Login to the operation platform system',
      'login.username': '用户名',
      'login.username.placeholder': '请输入用户名',
      'login.password': '密码',
      'login.password.placeholder': '请输入密码',
      'login.captcha': '图形验证码',
      'login.captcha.placeholder': '请输入验证码',
      'login.google.code': '谷歌验证码（若没有可以不填）',
      'login.google.code.placeholder': '请输入谷歌验证码',
      'login.submit': '登录'
    },
    'en_US': {
      'login.home': 'Official Website',
      'login.title.manage': 'Management Platform Login',
      'login.subtitle.manage': 'Login to the operation platform system',
      'login.username': 'Username',
      'login.username.placeholder': 'Please enter username',
      'login.password': 'Password',
      'login.password.placeholder': 'Please enter password',
      'login.captcha': 'Captcha',
      'login.captcha.placeholder': 'Please enter captcha',
      'login.google.code': 'Google Code (Optional)',
      'login.google.code.placeholder': 'Please enter Google code',
      'login.submit': 'Login'
    }
  };

  return messages[lang] || messages['zh_CN'];
}
</script>
